<template>
    <div  class="tableId">
        <div>
        <h3>您的个人信息</h3>
        <form>
            <lable>用户名：<input type="text" v-bind:value="UserName" disabled></lable><br>
            <lable>绑定邮箱：<input type="email" v-bind:value="UserEmail" disabled></lable><br>
            <lable>用户密码：<input type="password" v-bind:value="UserPassword" disabled></lable><br>
            <lable>收货地址<input type="text" v-bind:value="UserAddress" disabled></lable>
            <button>修改个人信息</button>
        </form>
        </div>
      <!--  <a href="#" style="color:red;text-decoration:underline">添加邮箱<br></a><a href="#" style="color:red;text-decoration:underline">修改邮箱</a>
        <a href="#" style="color:red;text-decoration:underline">修改密码</a> -->
    </div>
</template>


<script>
import "@/assets/css/base.css"
import "@/assets/css/common.css"
// import "@/assets/css/index.css"
export default {
    name : "UserDetail",
    data(){
        return {
            UserName: this.$store.state.User.UserName,
            UserEmail: this.$store.state.User.UserEmail,
            UserPassword: this.$store.state.User.UserPassword,
            UserAddress: this.$store.state.User.UserAddress
        }
    }
}
</script>
<style>
    .tableId {
        position: relative;
        height:500px;
    }
    
    .tableId h3 {
        position:absolute;
        top:80px;
        left:calc(50% - 300px);
        width:400px;
        padding:30px;
        border:1px solid #ccc;
    }
    
    .tableId form {
        position:absolute;
        font-size:16px;
        top:162px;
        width:400px;
        padding:20px;
        left:calc(50% - 300px);
        border:1px solid #ccc;
        line-height:30px;
    }
    .tableId form input {
        position:absolute;
        left:120px;
        height:30px;
    }

    .tableId form a {
        position:absolute;
        right:100px;
    }

    .tableId form button {
        position:absolute;
        top:180px;
        border:10px solid #ddd;
        border-radius:10px;
        background-color:#ddd;
        left:calc(50% - 50px);
    }
</style>